<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="js/layui/css/layui.css" media="all">
		<title>违章处理-车辆信息</title>
		<style>
			body {
				/* margin-top: 20px; */
			}

			.layui-row {
				border-bottom: 1px solid #ddd;
				width: 90%;
				margin: 0 auto;
				margin-top: 10px;
				padding-bottom: 10px;

			}

			.back {
				text-align: left;
				position: fixed;
				opacity: 0.8;
				top: 0px;
			}

			.content {
				margin-top: 40px;
				margin-bottom: 50px;
			}

			.d1 {
				height: 90px;
				line-height: 90px;
			}

			.d1 div {
				display: inline-block;
			}

			img {
				height: 80px;
				width: 80px;
				margin-right: 50px;
			}

			.layui-tab-title {
				text-align: center;
			}

			.layui-tab-title li {
				/* border: 2px solid #5FB878;
				border-bottom: none; */
				margin: 0 5px;
				font-size: 15px;
			}

			.violation-row {
				margin: 15px auto;
				padding: 5px;
				border: 1px solid #888888;
				width: 90%;
			}

			.violation-row div {
				margin: 10px 0;
			}

			.violation-info {
				padding-left: 5px;
				color: #EB7350;
			}

			.violation-btn {
				/* width: 100%;
				margin: 0 auto; */
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="back">
			<button type="button" id="backBtn" class="layui-btn layui-btn-sm" style="border: none;">
				<i class="layui-icon layui-icon-left">返回</i>
			</button>
		</div>

		<div class="content">
			<div class="layui-row">
				<div class="d1">
					<div><img src="./image/1.png" /></div>
					<div class="d1-list">豫RGB999</div>
				</div>
			</div>
		</div>

		<div class="layui-tab  layui-tab-brief" lay-filter="violation">
			<ul class="layui-tab-title">
				<li class="layui-this" lay-id="1">未处理</li>
				<li lay-id="2">已处理</li>
				<li lay-id="3">已交款</li>
			</ul>
			<div class="layui-tab-content">
				<div class="layui-tab-item layui-show">
					<div class="violation-row">
						<div><span>违章类型:</span><span class="violation-info">闯红灯</span></div>
						<div><span>发生地点:</span><span class="violation-info">十字路口</span></div>
						<div><span>发生日期:</span><span class="violation-info">2021年8月25日10:52:44</span></div>
						<div><span>处罚信息:</span><span class="violation-info">罚款200元,记6分</span></div>
						<div class="violation-btn"><button type="button"
								class="layui-btn layui-btn-danger" data-id ="1">接收处罚</button></div>
					</div>

					<div class="violation-row">
						<div><span>违章类型:</span><span class="violation-info">闯红灯</span></div>
						<div><span>发生地点:</span><span class="violation-info">十字路口</span></div>
						<div><span>发生日期:</span><span class="violation-info">2021年8月25日10:52:44</span></div>
						<div><span>处罚信息:</span><span class="violation-info">罚款200元,记6分</span></div>
						<div class="violation-btn"><button type="button"
								class="layui-btn layui-btn-danger">接收处罚</button></div>
					</div>

					<div class="violation-row">
						<div><span>违章类型:</span><span class="violation-info">闯红灯</span></div>
						<div><span>发生地点:</span><span class="violation-info">十字路口</span></div>
						<div><span>发生日期:</span><span class="violation-info">2021年8月25日10:52:44</span></div>
						<div><span>处罚信息:</span><span class="violation-info">罚款200元,记6分</span></div>
						<div class="violation-btn"><button type="button"
								class="layui-btn layui-btn-danger">接收处罚</button></div>
					</div>


				</div>
				<div class="layui-tab-item">
					<div class="violation-row">
						<div><span>违章类型:</span><span class="violation-info">闯红灯</span></div>
						<div><span>发生地点:</span><span class="violation-info">十字路口</span></div>
						<div><span>发生日期:</span><span class="violation-info">2021年8月25日10:52:44</span></div>
						<div><span>处罚信息:</span><span class="violation-info">罚款200元,记6分</span></div>
						<div class="violation-btn"><button type="button" class="layui-btn layui-btn-warm">缴款</button>
						</div>
					</div>
					<div class="violation-row">
						<div><span>违章类型:</span><span class="violation-info">闯红灯</span></div>
						<div><span>发生地点:</span><span class="violation-info">十字路口</span></div>
						<div><span>发生日期:</span><span class="violation-info">2021年8月25日10:52:44</span></div>
						<div><span>处罚信息:</span><span class="violation-info">罚款200元,记6分</span></div>
						<div class="violation-btn"><button type="button" class="layui-btn layui-btn-warm" data-id="2">缴款</button>
						</div>
					</div>
				</div>
				<div class="layui-tab-item">
					<div class="violation-row">
						<div><span>违章类型:</span><span class="violation-info">闯红灯</span></div>
						<div><span>发生地点:</span><span class="violation-info">十字路口</span></div>
						<div><span>发生日期:</span><span class="violation-info">2021年8月25日10:52:44</span></div>
						<div><span>处罚信息:</span><span class="violation-info">罚款200元,记6分</span></div>
						<div class="violation-btn"><button type="button"
								class="layui-btn layui-btn-disabled">已处理并缴纳罚款</button></div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/jquery.min.js"></script>
	<script src="js/layui/layui.js"></script>
	<script src="js/layer/layer.js"></script>
	<script src="js/common.js"></script>
	<script src="js/jquery.cookie.js"></script>
	<script>
		$(function() {
			var element;
			layui.use('element', function() {
				var $ = layui.jquery;
				element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块



			});

			$(".layui-btn-danger").on("click", function() {
				element.tabChange("violation", "2");
				// console.log($(this).parent().parent().html());
				// layer.msg($(this).parent().parent().html());
			});

			$(".layui-btn-warm").on("click", function() {
				window.location.href = "violation-money1.html";
			});

			$("#backBtn").on("click", function() {
				window.location.href = "violation-list.html";
			});



		});
	</script>
</html>
